<template>
  <header>
    <div class="l-content">
      <!-- <el-button
        @click="handleMenu"
        icon="el-icon-s-fold"
        size="mini"
      ></el-button> -->
       <!-- <el-button icon="el-icon-s-fold" circle></el-button> -->
      <i class="el-icon-s-fold" @click="handleMenu"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item v-for="item in $store.state.tableList" :key="item.path" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" szie="mini">
        <span>
          <img class="user" :src="userImg" />
        </span>
        <el-dropdown-menu>
          <el-dropdown-item >个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
          <!-- <button @click="logout">退出</button> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
// import { mapState } from 'vuex'
export default {
  data() {
    return {
      userImg: require("../assets/touxiang.jpg"),
    };
  },
  computed: {
    // ...mapState({
    //   tags: state => state.tableList
    // })
  },
  watch: {},
  methods: {
    handleMenu() {
      this.$store.commit("collapseMenu");
      // console.log(this.$store.state.isCollapse);
      this.$store.commit("textManage");
      //  console.log(this.$store.state.text);
    },
    logout(){
      console.log(11);
      this.$store.commit('clearToken')
      this.$store.commit('clearMenu')
      this.$router.push({
        name:'login'
      })

    }
    // getGags(){
    //   const tags = this.$store.state.tableList
    //   console.log(tags);
    // }
    
  },
  created() {},
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
header {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.l-content {
  display: flex;
  align-items: center;
}
.el-icon-s-fold {
  margin-right: 20px;
  color: #fff;
}
.user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
header>>>.el-breadcrumb__inner.is-link{
  color: #fff!important
}
.el-icon-s-fold{
  cursor:pointer;
}
</style>